<template>
	<div>
		<ul class="user">
			<router-link tag="li" to="/user/pay">已付款</router-link>
			<router-link tag="li" to="/user/nopay">未付款</router-link>
		</ul>
		<transition mode="out-in" name="fade">
			<router-view></router-view>
		</transition>
	</div>
	
</template>

<script>
	export default{
		beforeRouteEnter:function(to,from,next){
			if(to.path=='/user/pay'){
				next('/login')
			}else{
				next()
			}
		}
	}
</script>

<style>
	.user{
		text-align: center;
	}
	.user li{
		list-style: none;
		display: inline;
		margin: 40px;
	}
	.fade-enter-active, .fade-leave-active {
	  transition: opacity .5s;
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	  opacity: 0;
	}
</style>
